<template lang="pug">
  v-list(dense two-line flat subheader width="100%")
    v-list-item-group(:multiple = "multiple" v-model="bundleCriteria.selected")
      v-list-item(dense v-for="item in items" @click="onItemSelected")
        template(v-slot:default="{ active, toggle }")
          v-list-item-action
            v-checkbox(v-model="active" color="primary" @click="$emit('click')")
          v-list-item-content
            v-list-item-title {{ item.name }}
            v-list-item-subtitle {{ getItemSubTitle(item) }}
</template>

<script lang="ts">
  import Vue, {VueConstructor} from 'vue'
  import {mapMutations} from 'vuex'
  import {Asset} from '@/store/modules/types/Asset'
  import {AssetStock} from '@/store/modules/types/AssetStock'
  import {OrderItemType} from '@/store/modules/types/Order'

  export default (Vue as VueConstructor<Vue & {}>).extend({
    name: 'list-picker',
    props: ['bundleCriteria', 'multiple'],
    methods: {
      ...mapMutations('bundlePicker', ['dummy']),
      getItemSubTitle(item: Asset | AssetStock) {
        let msg = item.category.name
        if (item.type == OrderItemType.AssetStock) {
          msg += ' | 库存 ' + item.available_quantity
        }
        return msg
      },
      onItemSelected(event) {
        this.$nextTick(() => {
          this.dummy()
          console.log(this.bundleCriteria.selected)
        })
      }
    },
    watch: {
      bundleCriteria: {
        immediate: true,
        handler(val) {
          this.items = val.data
        }
      }
    },
    data() {
      return {
        items: []
      }
    }
  })
</script>